<template>
    <div>
        <div class="Selective-navigation">
            <div style="margin-left: .3rem;" @click="retreat"><van-icon class-prefix="icon" name="zuojiantou"></van-icon>
            </div>
            <div>选择国家或地区</div>
            <!-- 占位 -->
            <div>
            </div>
        </div>
        <!-- 快速搜索 -->
        <div>
            <div class="fast-search" @click="showPopup">
                <van-icon class-prefix="icon" name="fangdajing" style="font-size: .36rem;">
                    请输入国家/地区名，全拼或代码
                </van-icon>
            </div>
        </div>
        <van-popup v-model="show" position="top" :style="{ height: '30%', height: '3rem' }">
            <div class="navigations">

                <div style="display: flex; justify-content: space-between;">
                    <div style="margin-left: .3rem;" @click="retreat"><van-icon class-prefix="icon"
                            name="zuojiantou"></van-icon>
                    </div>
                    <div>选择国家或地区</div>
                    <!-- 占位 -->
                    <div></div>
                </div>

                <div style="display: flex; justify-content:center; text-align: center;">
                    <div style="width: 85%;">
                        <van-search v-model="value" placeholder="请输入国家/地区名，全拼或代码" />
                    </div>
                    <div style="color:#00C9E2; width: 15%; font-size:.4rem; line-height: 1.5rem;" @click="addshow">
                        取消
                    </div>
                </div>

            </div>
        </van-popup>

        <div>
            <van-index-bar :index-list="indexList">
                <van-index-anchor index="1" style="background-color: rgb(223, 223, 223);">热门</van-index-anchor>
                <div v-for="item in countries" style="display: flex;" @click="redirectToOtherPage(item.phoneNumber)">
                    <van-cell :title="item.name" />
                    <div style="margin-right: 1rem; line-height: 1.2rem;">{{ item.phoneNumber
                    }}</div>
                </div>


                <van-index-anchor index="2">B</van-index-anchor>
                <van-index-anchor index="3">C</van-index-anchor>
                <van-index-anchor index="4">D</van-index-anchor>
                <van-index-anchor index="5">E</van-index-anchor>

            </van-index-bar>
        </div>
    </div>
</template>
<script>
import { Mycountries } from '../../../api/zhangchu/zhangchuAPI/NumberArea';
export default {

    data() {
        return {
            show: false,
            randomNumber: "",
            //电话号前缀
            phoneNumber: "",
            indexList: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',],
            countries: [],
        };
    },

    created() {
        this.countriesAPI()
    },


    methods: {
        async countriesAPI() {
            let { data } = await Mycountries()
            console.log(data)
            this.countries = data
        },



        //后退
        retreat() {
            this.$router.go(-1);
        },
        //点击显示
        showPopup() {
            this.show = true;
        },
        //取消隐藏
        addshow() {
            this.show = false;
        },
        //路由传值
        redirectToOtherPage(phoneNumber) {
            this.$router.push({
                name: 'PhoneNumberSearch',
                params: {
                    phoneNumber: phoneNumber
                }
            });
        }
    }
}
</script>

<style scoped>
.Selective-navigation {
    height: 1.2rem;
    font-size: .5rem;
    display: flex;
    justify-content: space-between;
    line-height: 1.2rem;
}

.navigations {
    height: 1.2rem;
    font-size: .5rem;
    line-height: 1.2rem;
    display: flex;
    flex-direction: column;
}

.fast-search {
    background-color: rgb(224, 224, 224);
    height: 1rem;
    margin: .3rem;
    border-radius: .2rem;
    text-align: center;
    line-height: 1rem;
    color: #afafaf;
}
</style>